<template>
  <div id="bodypage">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/homePage' }"><span id="mainpage">我的主页</span></el-breadcrumb-item>
      <el-breadcrumb-item><span>羊群信息</span></el-breadcrumb-item>
      <el-breadcrumb-item><span>系谱档案</span></el-breadcrumb-item>
    </el-breadcrumb>
    <div>
      <div id="headerArea">
        <h2 style="margin:10px 0 10px 10px; display: inline-block;">羊只系谱档案表</h2>
        <el-button type="success" size="mini" style="margin-right: 15px;" @click="exportExcel">导出
        </el-button>
      </div>
      <template>
        <div style="display: inline-block;">
          <div class="searchNum">
            <el-input placeholder="使用羊只编号搜索" v-model="searchData.sheepId" clearable
              style="width: 200px; margin-left: 10px;" type="text" @keyup.enter.native="getInfoById">
            </el-input>
          </div>
        </div>
        <el-button round type="success" slot="append" icon="el-icon-search" style="margin: 10px 0 10px 10px;"
          @click="getInfoById">搜索
        </el-button>
      </template>
      <!-- 表格区 -->
      <el-table max-height="550" :data="tableData" :row-class-name="tableRowClassName" @cell-click="clickCell"
        @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave"
        :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
        <el-table-column type="selection" width="35"></el-table-column>
        <el-table-column width="30px"><template slot-scope="scope">{{scope.$index+1}}</template></el-table-column>
        <el-table-column type="expand">
          <div slot-scope="props" style="margin-left: 20px;">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="个体号:">
                <span>{{ props.row.个体号 }}</span>
              </el-form-item>
              <el-form-item label="父号:">
                <span>{{ props.row.父号 }}</span>
              </el-form-item>
              <el-form-item label="母号:">
                <span>{{ props.row.母号 }}</span>
              </el-form-item>
              <el-form-item label="祖父号:">
                <span>{{ props.row.祖父号 }}</span>
              </el-form-item>
            </el-form>
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="祖母号">
                <span>{{ props.row.祖母号 }}</span>
              </el-form-item>
              <el-form-item label="外祖父号:">
                <span>{{ props.row.外祖父号 }}</span>
              </el-form-item>
              <el-form-item label="外祖母号:">
                <span>{{ props.row.外祖母号 }}</span>
              </el-form-item>
              <el-form-item label="年龄:">
                <span>{{ props.row.年龄 }}</span>
              </el-form-item>
            </el-form>
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="出生体重:">
                <span>{{ props.row.出生体重 }}</span>
              </el-form-item>
              <el-form-item label="断奶体重">
                <span>{{ props.row.断奶体重 }}</span>
              </el-form-item>
            </el-form>
          </div>
        </el-table-column>
        <el-table-column width="100px" sortable prop="个体号" label="个体号" align="center"></el-table-column>
        <el-table-column sortable prop="父号" label="父号" align="center"></el-table-column>
        <el-table-column sortable prop="母号" label="母号" align="center"></el-table-column>
        <el-table-column width="100px" sortable prop="祖父号" label="祖父号" align="center"></el-table-column>
        <el-table-column width="100px" sortable prop="祖母号" label="祖母号" align="center"></el-table-column>
        <el-table-column width="120px" sortable prop="外祖父号" label="外祖父号" align="center"></el-table-column>
        <el-table-column width="120px" sortable prop="外祖母号" label="外祖母号" align="center"></el-table-column>
        <el-table-column sortable prop="年龄" label="年龄" align="center"></el-table-column>
        <el-table-column width="120px" sortable prop="出生体重" label="出生体重" align="center"></el-table-column>
        <el-table-column width="120px" sortable prop="断奶体重" label="断奶体重" align="center"></el-table-column>
      </el-table>
      <el-pagination @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
        :page-size="queryInfo.pagesize" layout="total, prev, pager, next, jumper" :total="queryInfo.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        searchData: {
          sheepId: ''
        },
        tableData: [],
        //分页相关数据
        queryInfo: {
          query: '',
          pagenum: 1, // 当前页码
          pagesize: 10, // 当前每页显示的数据数
          total: 0,
          pageStatus: false //标识页码是否发生了变化
        },
      }
    },

    methods: {
      //单击父号、母号、祖父号、祖母号、外祖父号和外祖母号时查询对应羊只信息
      clickCell(row, column, cell, event) {
        if ((column.label == '父号' || column.label == '母号' || column.label == '祖父号' || column.label == '祖母号' || column.label == '外祖父号' || column.label == '外祖母号') && cell.children[0].innerHTML != '') {
          // this.searchData.sheepId = cell.children[0].innerHTML
          this.$store.commit('jumpToCardInfo', cell.children[0].innerHTML)
          this.$router.push("/cardInfo")
        }
      },
      //鼠标移入单元格时使文字变为蓝色
      mouseEnter(row, column, cell, event) {
        if (column.label == '父号' || column.label == '母号' || column.label == '祖父号' || column.label == '祖母号' || column.label == '外祖父号' || column.label == '外祖母号') {
          cell.children[0].style.color = '#03a9f4'
        }
      },
      //鼠标移出单元格时使文字变回原色
      mouseLeave(row, column, cell, event) {
        cell.children[0].style.color = '#606266'
      },
      //以羊只编号搜索
      async getInfoById() {
        let { data } = await this.$axios({
          method: 'post',
          url: '/familyWord/xiPuWord/find',
          data: {
            sheepId: this.searchData.sheepId,
            page: this.queryInfo.pagenum
          }
        })
        //如果获取成功
        if (data.code === 0) {
          this.$message({
            type: 'success',
            message: data.msg,
            duration: 2500
          })
        } else {
          //获取失败
          return this.$message({
            type: 'error',
            message: data.msg,
            duration: 2500
          })
        }
        //渲染数据到页面
        this.queryInfo.total = data.data.countAll
        this.tableData = data.data.result
      },
      tableRowClassName({ row, rowIndex }) {
        if (row.死亡 == "是") {
          return 'die-row';
        }
        return '';
      },
      // 改变页码值
      handleCurrentChange(newPage) {
        this.queryInfo.pagenum = newPage;
      },
      //导出Excel表格
      exportExcel() {
        let data = this.tableData;
        //1. 新建一个工作簿
        let workbook = this.$XLSX.utils.book_new();
        //2. 把json对象转成工作表
        let sheet = this.$XLSX.utils.json_to_sheet(data);
        //3.在工作簿中添加工作表
        this.$XLSX.utils.book_append_sheet(workbook, sheet, '系谱档案信息表'); //工作簿名称
        //4.输出工作表,由文件名决定的输出格式
        this.$XLSX.writeFile(workbook, '系谱档案信息表(导出日期：' + this.$moment().format("YYYY年MM月DD日 HH时mm分ss秒 dddd") + ').xlsx'); // 保存的文件名
      },
    }
  }
</script>

<style Lang="less" scoped>
  * {
    color: #4b9100;
  }

  .demo-table-expand {
    font-size: 10px;
  }

  .el-form>>>.el-form-item__label {
    width: 90px;
    color: #000000;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 20%;
  }

  .searchNum>>>.el-input__inner {
    border: 2px solid rgb(75, 152, 207);
    border-radius: 10px;
    color: #000;
  }

  #headerArea {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
</style>